<template>
    <div>
        <el-card>
            <el-tabs v-model="activeName">
                <el-tab-pane label="关键字自动回复" name="first">
                    <el-button type="primary" round icon="el-icon-circle-plus-outline" @click="toaddkey">新建关键字回复</el-button> 
                    <el-table :data="tableData" border class="userTable" style="width: 100%">
                        <el-table-column prop="id" label="ID"> </el-table-column>
                        <el-table-column prop="name" label="规则名称"> </el-table-column>
                        <el-table-column prop="text" label="关键字"> </el-table-column>
                        <el-table-column prop="mesge" label="消息"> </el-table-column>
                        <el-table-column prop="caozuo" label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="danger" plain
                                    @click="openSCdialog(scope.$index)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button type="primary" class="fanhuiBtn" @click="toPubliclist">返回</el-button>
                </el-tab-pane>
                <el-tab-pane label="关注自动回复" name="second">
                    <div class="bindTitle">绑定内容</div>
                    <el-input class="input" type="textarea" :rows="10" v-model="content" placeholder="请输入内容"></el-input>
                    <br>
                    <el-button type="success" class="fanhuiBtn" @click="toPubliclist">返回</el-button>
                    <el-button type="primary" class="fanhuiBtn" @click="guanzhuSend">保存</el-button>
                </el-tab-pane>
            </el-tabs>
        </el-card>
        
        <el-dialog
            :visible.sync="dialogVisible"
            width="30%"
            title="是否删除"
            top="35vh"
        >   
            <div style="display:flex">
                <span>关键字</span>
                <p style="margin-left:90px;color:#000">{{text}}</p>
            </div> <br><br><br>
            <el-button type="success" class="fengjinBtn" @click="toDelete">删除</el-button>
            
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName:'first',
            content:'',
            tableData: [],
            dialogVisible:false,
            text:'',
            textId:'',
            appId:''
        }
    },
    methods:{
        toPubliclist(){
            this.$router.push('/Public/Publiclist')
        },
        toaddkey(){
            this.$router.push({name:"Newzeng",query:{appId:this.appId}})
        },
        getData(type){
            var send = {
				content:this.content,
				type:type,
				appId:this.appId
			}
            this.$http.post('addGuanzhu',send).then((data)=>{
                if(data.data.success){
					this.content = data.data.data.content;
					var num = data.data.msg.length;
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000,
						onClose:()=>{
							this.activeName = 'first';
						}
					});
                }else{
                    this.$message.error(data.data.msg)
                }
            })
        },
        guanzhuSend(){
            this.getData('set')
        },
        openSCdialog(x){
            this.dialogVisible = true;
            this.text = this.tableData[x].text;
            this.textId = this.tableData[x].id;
        },
        toDelete(){
            this.$http.post('delKeyword',{textId:this.textId,appId:this.appId}).then((data)=>{
                if(data.data.success){
                    this.getList(this.appId)
					var num = data.data.msg.length;
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
					});
                }else{
                    this.$message.error(data.data.msg)
                }
            })
            this.dialogVisible = false;
        },
        getList(appId){
            this.$http.post('getAutoreply',{appId}).then((data)=>{
                if(data.data.success){
                    this.tableData = data.data.data.tableData;
                }else{
                    this.$message.error(data.data.msg)
                }
            })
        }
    },
    created(){
        this.appId = this.$route.query.appId;
        this.getList(this.appId)
		this.getData('get')
    }
}
</script>

<style scoped>
.el-card{
    margin: 8px;
}
.userTable{
    margin: 40px 0 70px;
}
.fanhuiBtn{
    /* background-color: #1890ff; */
    color: #fff;
    width: 117px;
    margin: 80px 0 10px;
}
.bindTitle{
    margin: 25px 0;
}
textarea{
    width: 600px;
    height: 320px;
    padding: 10px;
    font-size: 18px;
    margin-bottom: 80px;
}
.input{
    width: 600px;
}
.fengjinBtn{
    background-color: #2AD198;
    color: #fff;
    width: 117px;
    margin-left: 100px;
}
</style>